<template>
  <h2>vue + 高德地图</h2>
  <button @click="add">切换成道路图层</button>
  <button @click="remove">取消道路图层</button>
  <button @click="change">显示/隐藏罗盘</button>
  <div id="container"></div>
</template>

<script setup lang="ts">
// 引入高德地图
import AMapLoader from "@amap/amap-jsapi-loader";

import { onMounted, onUnmounted } from "vue";

let map: any = null;
let traffic: any = null;

// 罗盘实例
let controlBar: any = null;
// 控制罗盘的显示和隐藏
let show: boolean = false;

onMounted(() => {
  (window as any)._AMapSecurityConfig = {
    // 安全密钥
    // 在官网创建项目后会有
    securityJsCode: "4d1d9eabf6da6c5bef08f31b4c3fac5f",
  };
  // 加载
  AMapLoader.load({
    key: "6de33a10dc6b2f090db04b688f5ef3cf", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "2D", // 是否为3D地图模式, 默认是2D
        zoom: 17, // 初始化地图级别。（3 - 20级）
        center: [120.139703, 30.285633], // 初始化地图中心点位置
        // 经度 -180到180，正表示东经，负表示西经
        // 纬度 -90到90，正表示北半球，负表示南半球
        // mapStyle: "amap://styles/dark", //设置地图的显示样式
      });

      // 图层实例
      /*
        标准图层 TileLayer
        卫星图层 TileLayer.Satellite
        路网图层 TileLayer.RoadNet
        实时交通图层 TileLayer.Traffic
        楼块图层 Buildings
        室内图层 IndoorMap
      */
      traffic = new AMap.TileLayer.Traffic({
        autoRefresh: true, //是否自动刷新，默认为false
        interval: 180, //刷新间隔，默认180s
      });
      map.add(traffic);

      // 添加控件
      // 放大缩小
      AMap.plugin("AMap.ToolBar", function () {
        var toolbar = new AMap.ToolBar(); //缩放工具条实例化
        map.addControl(toolbar); //添加控件
      });
      // 比例尺
      AMap.plugin("AMap.Scale", function () {
        var scale = new AMap.Scale(); //比例尺实例化
        map.addControl(scale); //添加控件
      });
      AMap.plugin("AMap.ControlBar", function () {
        controlBar = new AMap.ControlBar({
          visible: false,
          position: {
            top: "110px",
            right: "40px",
          },
        }); //比例尺罗盘
        map.addControl(controlBar); //添加控件
      });

      // 添加点标记
      const marker1 = new AMap.Marker({
        position: new AMap.LngLat(120.139703, 30.285633),
        title: "9号楼", // 鼠标移上去的标题
      });
      const marker2 = new AMap.Marker({
        position: new AMap.LngLat(120.139734, 30.285926),
        title: "8号楼", // 鼠标移上去的标题
      });
      // map.add(marker1);
      map.add([marker1, marker2]); // 一次性可以添加多个标记
      marker1.on("click", function (e: any) {
        console.log(e);
      });

      // var text = new AMap.Text({
      //   text: "9号楼", //标记显示的文本内容
      //   anchor: "center", //设置文本标记锚点位置
      //   style: {
      //     //设置文本样式，Object 同 css 样式表
      //     padding: ".75rem 1.25rem",
      //     "margin-bottom": "1rem",
      //     "border-radius": ".25rem",
      //     "background-color": "white",
      //     width: "15rem",
      //     "border-width": 0,
      //     "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
      //     "text-align": "center",
      //     "font-size": "20px",
      //     color: "blue",
      //   },
      //   position: [120.139703, 30.285633], //点标记在地图上显示的位置
      // });
      // text.setMap(map); //将文本标记设置到地图上

      // 给地图添加点击事件
      map.on("click", (e: any) => {
        // console.log(e.lnglat.lng, e.lnglat.lat);
        const marker3 = new AMap.Marker({
          position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
          icon: "//vdata.amap.com/icons/b18/1/2.png",
          offset: new AMap.Pixel(-10, -10), // 自定义图片的平移
        });
        map.add(marker3);
      });

      // 加载车辆位置
      getCarsPosition(AMap);

      const pathArr = [
        [
          [
            [120.141524, 30.286339],
            [120.141387, 30.285086],
            [120.140213, 30.284952],
            [120.140188, 30.284708],
            [120.137865, 30.284505],
            [120.137789, 30.286007],
            [120.141524, 30.286339],
          ],
        ],
      ];
      const polygon = new AMap.Polygon({
        path: pathArr, //多边形路径
        fillColor: "#ccebc5", //多边形填充颜色
        strokeOpacity: 1, //线条透明度
        fillOpacity: 0.5, //填充透明度
        strokeColor: "#2b8cbe", //线条颜色
        strokeWeight: 1, //线条宽度
        strokeStyle: "dashed", //线样式
        strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式
      });
      //鼠标移入更改样式
      polygon.on("mouseover", () => {
        polygon.setOptions({
          fillOpacity: 0.7, //多边形填充透明度
          fillColor: "#7bccc4",
        });
      });
      //鼠标移出恢复样式
      polygon.on("mouseout", () => {
        polygon.setOptions({
          fillOpacity: 0.5,
          fillColor: "#ccebc5",
        });
      });
      map.add(polygon);

      //创建圆形 Circle 实例
      var circle = new AMap.Circle({
        center: [120.139703, 30.285633], //圆心
        radius: 1000, //半径
        borderWeight: 3, //描边的宽度
        strokeColor: "#FF33FF", //轮廓线颜色
        strokeOpacity: 1, //轮廓线透明度
        strokeWeight: 6, //轮廓线宽度
        fillOpacity: 0.4, //圆形填充透明度
        strokeStyle: "dashed", //轮廓线样式
        strokeDasharray: [10, 10],
        fillColor: "#1791fc", //圆形填充颜色
        zIndex: 50, //圆形的叠加顺序
      });
      // map.add(circle);

      //信息窗体的内容
      var content = [
        "<div><b>高德软件有限公司</b>",
        "电话 : 010-84107000   邮编 : 100102",
        "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>",
      ];

      //创建 infoWindow 实例
      var infoWindow = new AMap.InfoWindow({
        content: content.join("<br>"), //传入字符串拼接的 DOM 元素
        anchor: "top-left",
      });

      //打开信息窗体
      infoWindow.open(map, map.getCenter()); //map 为当前地图的实例，map.getCenter() 用于获取地图中心点坐标。

      var contextMenu = new AMap.ContextMenu();
      //右键放大
      contextMenu.addItem(
        "放大一级",
        function () {
          map.zoomIn();
        },
        0
      );
      //右键缩小
      contextMenu.addItem(
        "缩小一级",
        function () {
          map.zoomOut();
        },
        1
      );
      contextMenu.addItem(
        "哈哈哈",
        function () {
          console.log("hahaha");
        },
        2
      );

      //地图绑定鼠标右击事件——弹出右键菜单
      map.on("rightclick", function (e: any) {
        contextMenu.open(map, e.lnglat);
      });

      map.on("mapmove", (e: any) => {
        console.log("地图移动了");
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

const add = () => {
  map.add(traffic); //通过add方法添加图层
};
const remove = () => {
  map.remove(traffic);
};

const change = () => {
  if (show) {
    controlBar.hide();
    show = false;
  } else {
    controlBar.show();
    show = true;
  }
};

const getCarsPosition = (AMap: any): void => {
  setTimeout(() => {
    const data = [
      [120.14148, 30.285614],
      [120.141349, 30.283421],
      [120.1397, 30.285799],
      [120.140252, 30.285936],
    ];
    const markers = data.map((item) => {
      return new AMap.Marker({
        position: new AMap.LngLat(...item),
        icon: "//vdata.amap.com/icons/b18/1/2.png",
        offset: new AMap.Pixel(-10, -10),
      });
    });
    map.add(markers);
  }, 200);
};

onUnmounted(() => {
  map?.destroy();
});
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 700px;
  border: 1px solid #000;
}
</style>
